import React, { useState } from 'react';
import { Observer, useLocalStore } from 'mobx-react';

import styles from './try_mobx_hooks.css';

export default function ObservePerson() {
  const person = useLocalStore(() => ({
    name: 'John',
    age: 43,
    studies: ['vue'],
  }));
  const [study, setStudy] = useState('');
  return (
    <div>
      {person.name} <i>I will never change my name</i>
      <Observer>
        {() => (
          <div>
            <div>
              {person.name} {person.age} years old
            </div>
            <ol>
              {person.studies.map(study => (
                <li>{study}</li>
              ))}
            </ol>
          </div>
        )}
      </Observer>
      <div>
        <button onClick={() => (person.name = 'Mike' + Date.now())}>
          I want to be Mike
        </button>
      </div>
      <hr />
      <div>
        <button
          onClick={() => {
            person.age++;
          }}
        >
          increase age
        </button>
        <button
          onClick={() => {
            person.age--;
          }}
        >
          decrease age
        </button>
      </div>
      <div>
        <input type="text" onChange={e => setStudy(e.target.value)} />
        <button
          onClick={() => {
            person.studies.push(study);
          }}
        >
          {' '}
          add{' '}
        </button>
      </div>
    </div>
  );
}
